import React, { Component } from 'react'
import { Text, View, StyleSheet, Image, ScrollView, } from 'react-native'

import Swiper from 'react-native-swiper'

import { sWidth, sHeight, } from '../utils/screen'
export default class SwiperComponent extends Component {
  render() {
    return (
      <ScrollView>
        <Swiper style={styles.wrapper} 
          removeClippedSubviews={false}
          autoplayTimeout={5} 
          dotStyle={styles.dotStyle}
          activeDotStyle={styles.activeDotStyle}
          autoplay={true}>
          <View style={styles.imgBox}>
            <Image style={styles.img} resizeMode="cover" source={require('../assets/images/tmp/1.png')} />
          </View>
          <View style={styles.imgBox}>
            <Image style={styles.img} resizeMode="cover" source={require('../assets/images/tmp/1.png')} />
          </View>
          <View style={styles.imgBox}>
            <Image style={styles.img} resizeMode="cover" source={require('../assets/images/tmp/1.png')} />
          </View>
        </Swiper>
      </ScrollView>
    )
  }
}


const styles = StyleSheet.create({
  wrapper: {
    height:sWidth / 3,
  },
  imgBox:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  img:{
    width:sWidth,
    height:sWidth / 3,
  },
  dotStyle:{
    backgroundColor:'#000',
    opacity:0.4,
  },
  activeDotStyle:{
    backgroundColor:'#d5af00',
  }
})
